<template>
  <div class="app-container">
    <div class="message-item">
      <h3>推送信息</h3>
      <p>模版名称：{{messageViewData.templateName}}</p>
      <p v-if="messageViewData.title">
        推送标题：{{messageViewData.title}}
      </p>
      <p>推送内容：</p>
      <p>
        {{messageViewData.templateContext}}
      </p>

      <p v-if="messageViewData.img">图片：</p>
      <p v-if="messageViewData.img">
        <img
          class="img"
          :src="messageViewData.img"
          alt=""
        >
      </p>

      <p v-if="messageViewData.link">
        链接：{{messageViewData.link}}
      </p>

      <div v-if="messageViewData.chooseUser == '3'">
        <h3>推送用户</h3>
        <p>
          <span>用户ID：{{messageViewData.userId}} 手机号：{{messageViewData.userName}} 昵称：{{messageViewData.nickName}}</span>
        </p>
      </div>
      <div v-else-if="messageViewData.chooseUser =='1'">
        <h3>推送范围</h3>
        <p>
          全部用户
        </p>
      </div>

      <p>推送时间：{{$route.query.createTime}}</p>

      <h3>推送结果</h3>
      <p v-if=" messageViewData.status == '1'">
        发送成功
      </p>
      <p v-else-if=" messageViewData.status == '2'">
        部分成功：失败{{messageViewData.failList.length}}个用户
      </p>
      <p v-else-if="messageViewData.status == '0' && messageViewData.failList.length >0">
        发送失败：失败{{messageViewData.failList.length}}个用户
      </p>
      <p v-else-if="messageViewData.status == '0' && messageViewData.failList.length ==0">
        发送失败
      </p>

      <p v-if="messageViewData.status !== '1' && messageViewData.failList.length >0">失败用户</p>
      <ul v-if="messageViewData.status !== '1' && messageViewData.failList.length >0">
        <li
          v-for="item in messageViewData.failList"
          :key="item.userId"
        >
          用户ID：{{item.userId}} 手机号：{{item.userName}} 昵称：{{item.nickName}}
        </li>
      </ul>

      <p v-if="messageViewData.count">
        推送数量：{{messageViewData.count}}个用户
      </p>

    </div>
  </div>
</template>

<script>
import {
  fetchSendMessageView,
  fetchAppMessageViewData,
  fetchYouMengViewData
} from "@/api/other";
export default {
  data() {
    return {
      messageViewData: {
        chooseUser: "",
        templateContext: "",
        createTime: "",
        userId: "",
        nickName: "",
        userName: "",
        failList: [],
        count: "",
        title: "",
        status: ""
      }
    };
  },
  mounted() {
    this.getMessageViewData();
  },
  methods: {
    async getMessageViewData() {
      if (this.$route.query.templateId == "1") {
        const viewData = await fetchSendMessageView({
          createTime: this.$route.query.createTime,
          templateCode: this.$route.query.templateCode
        });
        if (viewData.status == "200") {
          this.messageViewData.userId = viewData.data.userId;
          this.messageViewData.nickName = viewData.data.nickName;
          this.messageViewData.templateContext = viewData.data.templateContext;
          this.messageViewData.userName = viewData.data.userName;
          this.messageViewData.templateName = viewData.data.templateName;
          this.messageViewData.status = viewData.data.status;
          this.messageViewData.chooseUser = viewData.data.chooseUser;
          if (viewData.data.failList) {
            this.messageViewData.failList = [];
            viewData.data.failList.forEach(item => {
              const failData = {};
              failData.nickName = item.nickName;
              failData.userName = item.userName;
              failData.userId = item.userId;
              this.messageViewData.failList.push(failData);
            });
          }
        }
      } else if (this.$route.query.templateId == "3") {
        const viewData = await fetchAppMessageViewData({
          messageInfoId: this.$route.query.messageInfoId
        });
        if (viewData.status == "200") {
          this.messageViewData.userId = viewData.data.userId;
          this.messageViewData.nickName = viewData.data.nickName;
          this.messageViewData.userName = viewData.data.userName;
          this.messageViewData.templateContext = viewData.data.content;
          this.messageViewData.templateName = viewData.data.typeName;
          this.messageViewData.title = viewData.data.title;
          this.messageViewData.img = viewData.data.img;
          this.messageViewData.link = viewData.data.link;
          this.messageViewData.count = viewData.data.count;
          this.messageViewData.chooseUser = viewData.data.chooseUser;
        }
      } else if (this.$route.query.templateId == "2") {
        const viewData = await fetchYouMengViewData({
          createTime: this.$route.query.createTime
        });
        if (viewData.status == "200") {
          this.messageViewData.userId = viewData.data.userId;
          this.messageViewData.nickName = viewData.data.nickName;
          this.messageViewData.userName = viewData.data.userName;
          this.messageViewData.templateContext = viewData.data.text;
          this.messageViewData.title = viewData.data.title;
          this.messageViewData.chooseUser = viewData.data.chooseUser;
          this.messageViewData.count = viewData.data.count;
          this.messageViewData.templateName = viewData.data.ticker;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.message-item {
  padding: 20px;
  p {
    padding: 10px 0;
  }
  .img {
    width: 400px;
  }
}
</style>

